<template>
  <div class="app-container add-setting">
    <Title title="新建字段" />
    <div class="main-content">
      <el-form ref="editCustomerForm" :model="dataForm" :rules="formRules">
        <div class="flex-wrap">
          <el-form-item label="模块" prop="moduleId" label-width="49px">
            <el-select v-model="dataForm.moduleId" popper-class="global-select-down" name="moduleId">
              <el-option
                v-for="item in moduleList"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="表单信息" prop="tableId" label-width="80px" style="margin-left: 30px;">
            <el-select v-model="dataForm.tableId" popper-class="global-select-down" name="tableId">
              <el-option
                v-for="item in moduleList"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="字段信息" prop="fieldInfoId" label-width="80px" style="margin-left: 30px;">
            <el-select v-model="dataForm.fieldInfoId" popper-class="global-select-down" name="fieldInfoId">
              <el-option
                v-for="item in moduleList"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <fieldSelect style="margin-top: 18px;" />
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import fieldSelect from '@/components/SettingPage/fieldCreate';
export default {
  components: { Title, fieldSelect },
  data() {
    return {
      dataForm: {
        moduleId: '',
        tableId: '',
        fieldInfoId: ''
      },
      formRules: {},
      moduleList: [
        { id: 1, name: '销售业务流' }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.add-setting {
  margin: 32px;
  box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  border-radius:12px;
  background-color: #fff;
  padding: 32px;
}
.flex-wrap {
  display: flex;
  align-items: center;
}
.main-content {
  margin-top: 32px;
  ::v-deep {
    .el-form {
      .el-form-item {
        display: flex;
        align-items: center;
      }
      .el-form-item__content {
        margin-left: 0 !important;
        .el-select {
          height: 32px;
          width: 160px;
          .el-input {
            height: 32px;
            line-height: 30px;
            .el-input__inner {
              height: 100%;
            }
            .el-input__suffix {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
